import QtQuick 2.12
import QtQuick.Controls 2.5
import QtMultimedia 5.13

Page {
    width: 600
    height: 400

    Rectangle {
        color: "black"
        //        color: "transparent"
        anchors.fill: parent

        MediaPlayer {
            id: mp
            source: "file:///c:/videos/qucai.avi"
            loops: MediaPlayer.Infinite

//            Component.onCompleted: mp.seek(0)
        }

        VideoOutput {
            id: video
            anchors.fill: parent
            source: mp
            fillMode: VideoOutput.Stretch
            flushMode: VideoOutput.FirstFrame
            z: 100
        }
    }


    Rectangle {
        id: btnPlay
        color: "black"
        opacity: 0.5
        anchors.fill: parent
        //        Behavior on opacity { PropertyAnimation { duration: 600} }



        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                if (mp.playbackState === MediaPlayer.PlayingState) {
                    doStop()
                }
                else {
                    doPlay()
                }
            }
        }

        //        Image {
        //            id: chicken
        //            source: "qrc:/imgs/chicken.png"
        //            anchors.fill: parent
        //        }

    }

    Image {
        id: imgPlay
        width: 162
        height: 186
        anchors.centerIn: parent
        source: "qrc:/imgs/play.png"
        Behavior on opacity { PropertyAnimation {duration: 600}}
        Behavior on scale { PropertyAnimation {duration: 600}}
    }

    Text {
        id: ss1
        text: "Step 1"
        font.family: "GothamBook"
        font.pixelSize: 64
        color: "white"
        opacity: 1
        width: 190
        height: 57
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 865
        anchors.topMargin: 72
    }


    Text {
        id: tDesc
        text: "Prepare all the main ingredients, one piece of chicken, one piece of Pleurotus eryngii, two pieces of\n
persimmon and pepper, one bag of barbecue, one piece of green onion, one piece of ginger, a little pepper, \n
and a proper amount of salt."
        width: 1307
        height: 71
        opacity: 1
        color: "white"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.topMargin: 198
        anchors.leftMargin: 307
        font.family: "GothamBook"
        font.pixelSize: 24
        //        color: Qt.rgba(255,255,255,0.6)
        horizontalAlignment: Text.AlignHCenter
        lineHeightMode: Text.FixedHeight
        lineHeight: 12
    }


    function doPlay() {
        mp.play()
//        mp.seek(100)
        imgPlay.opacity = 0.0
        imgPlay.scale = 1.3
    }

    function doStop() {
        mp.stop()
        //        btnPlay.opacity = 0.2
        imgPlay.opacity = 1.0
        imgPlay.scale = 1.0
    }


    Timer {
        id: t
        interval: 1000
        repeat: false
        onTriggered: {
            mp.stop()
            mp.muted = false
        }
    }

    Component.onCompleted: {
        mp.muted = true
        mp.play()
        t.start()
        print("step1 played")
    }
}
